<template>
  <div class="content">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>天天王炸小伙伴</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <ImgT class="save" src="/imgs/club/share.png" @click="goToPage" />
      </template>
    </nut-navbar>

    <div class="club_card">
      <!-- 俱乐部信息 -->
      <div class="club_info">
        <ImgT src="/imgs/club/club_icon.png" alt="Club Icon" class="club_icon" />
        <div class="club_details">
          <div class="club_name">{{ clubs.name }}</div>
          <div class="club_id">ID {{ clubs.id }}</div>
          <div class="club_desc">{{ clubs.description }}</div>
        </div>
        <ImgT class="club_btn" src="/imgs/club/set_up.png" v-if="clubs.isManage" @click="router.push('/club/create')" />
      </div>
      <!-- 成员信息 -->
      <div class="member_info">
        <div class="member_title">
          <span>成员{{ clubs.members.length }}人</span>
          <span class="member_manage" v-if="clubs.isManage" @click="router.push('/club/member')">
            成员管理<span v-if="clubs.unread > 0" class="unread_badge">{{ clubs.unread }}</span>
          </span>
        </div>
        <div class="member_list">
          <div class="member_avatar_box">
            <img
              v-for="(member, index) in clubs.members"
              :key="index"
              :src="member.avatar"
              alt="Member Avatar"
              class="member_avatar"
            />
          </div>
          
          <div class="more_members"  @click="router.push('/club/member/allMember')">...</div>
        </div>
      </div>
    </div>
    
    <!-- 最新赛事 -->
    <div class="card_list_box">
      <div class="swiperBox event_box">
        <swiper direction="horizontal" :modules="modules" :navigation="{
          prevEl: '.swiper_pre2',
          nextEl: 'swiper_next2'
        }" @swiper="(e: any) => { eventRef = e; updateSwiperStatus('event'); }"
          @slideChange="updateSwiperStatus('event')" :autoplay="false" :loop="false" :delay="3000"
          :disableOnIntercation="false" slidesPerView="auto" :spaceBetween="5 - 5" :centeredSlides="true">
          <swiper-slide v-for="(item, key) in swiperList" :key="key">
            <div class="events_swiper">
              <imgT w-full h-full :src="`${settings.backend_upload}${item.tournm_logo}`" fit="cover" />
              <ul class="event_box_btn">
                <li class="time_box">
                  <iconpark-icon name="time" size="18" />
                  <span>
                    {{ t("home_page_event_date", {
                      year: item.begin_time.year,
                      month: item.begin_time.month,
                      day: item.begin_time.day,
                      hour: item.begin_time.hour,
                    }) }}
                  </span>
                </li>
                <li class="join_box">{{ t('home_page_sign_up') }}</li>
              </ul>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <!-- 全部分类 -->
    <div class="card_lis_all">
      <GameCard :isManage="clubs.isManage" />
    </div>
    <!-- 申请 -->
    <Modal v-model:visible="isShowWin" :title="t(club_title)" @close="">
      <div class="popup_body">
        <div class="info">是否确认申请管理员</div>
        <!-- <nut-input v-model="club_id" :placeholder="t('请输入俱乐部ID')" /> -->
        <div class="submit_btn">
          <span class="submit_close" @click="close">取消</span>
          <Btn height="44px" width="147px" class="submit" @click="submitAc">确定</Btn>
        </div>
      </div>
    </Modal>

    <!-- 邀请分享 -->
    <InvitationPopup 
      v-model:visible="isShowApply"
      :close="onModalClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, watch, onBeforeMount, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';

import { useRouter } from "vue-router";
import { NetPacket } from '@/netBase/NetPacket';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';


import 'swiper/css';
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/pagination'
import { Page } from '@/store/page';

import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';

const { settings } = storeToRefs(Page(pinia));

import GameCard  from '../components/gameCard.vue';
import InvitationPopup from "../components/invitationPopup.vue";

// const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const modules = [Autoplay, Pagination];

const isShowWin = ref(false);
const club_title = ref('');

const clubs = reactive({
  name: "天天炸金花小伙伴",
  id: "734556",
  description: "贵邀特约带着天天炸金花整蛊选择朋友们齐参与。",
  members: [
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
    { avatar: "/imgs/club/club_icon.png" },
  ],
  unread: 2,
  isManage: true, 
});


const isShowApply = ref(false);
const goToPage = () => {
  isShowApply.value = true
  club_title.value = '提示'
}

const onModalClose = () => {
  isShowApply.value = false;
};

const close = () => {
  isShowWin.value = false
}

const submitAc = () => {
  isShowWin.value = false
}

const eventRef = ref() // 赛事
const swiperList: any = ref([]);
const isEventBeginning = ref(true)
const isEventEnd = ref(false)

// const otherHandlePrev = (item: any, type: string) => {
//   if (type === 'event' && !isEventBeginning.value && swiperList.value.length > 0) {
//     item.slidePrev();
//     updateSwiperStatus(type);
//   }
// }
// const otherHandleNext = (item: any, type: string) => {
//   if (type === 'event' && !isEventEnd.value && swiperList.value.length > 0) {
//     item.slideNext();
//     updateSwiperStatus(type);
//   }
// }
const updateSwiperStatus = (type: string) => {
  nextTick(() => {
    const swiper = type === 'event' ? eventRef.value :'';
    if (swiper) {
      if (type === 'event') {
        isEventBeginning.value = swiper.isBeginning;
        isEventEnd.value = swiper.isEnd;
      }
    }
  });
};

watch(swiperList, () => {
  if (eventRef.value) {
    updateSwiperStatus('event');
  }
});

const handleEventsList = async (res: any) => {
  swiperList.value = res.tournm_list;
};

onBeforeMount(() => {
  //获取赛事列表
  const eventsList = NetPacket.req_tournament_events_list();
  eventsList.game_type = 0
  eventsList.page = 6

  H5Websocket.sendMessageHandler(eventsList);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_tournament_events_list,
    handleEventsList
  );
});

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_tournament_events_list, null);
});
</script>

<style scoped lang="scss">
.content {
  font-size: 14px;
  margin: 0 0 10px;

  .arrow_left {
    width: 24px;
    height: 24px;
  }
  .save {
    width: 32px;
    height: 32px;
  }
  .club_card {
    width: 347px;
    margin: 20px auto 0;
    border-radius: 10px;
    color: #fff;
    font-family: Arial, sans-serif;

    .club_info {
      width: 347px;
      height: 118px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 14px;
      border-radius: 8px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      position: relative;

      .club_icon {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        margin-right: 6px;
      }

      .club_details {
        flex: 1;

        .club_name {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
          color: #FFFFFF;
        }

        .club_id {
          font-size: 14px;
          color: #FFFFFF;
          margin-bottom: 8px;
        }

        .club_desc {
          font-size: 12px;
          color: #C0C2DB;
        }
      }

      .club_btn {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 24px;
        height: 24px;
      }
    }

    .member_info {
      width: 347px;
      height: 90px;
      padding: 12px 16px;
      border-radius: 8px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

      .member_title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
        color: #FFFFFF;

        .member_manage {
          color: #5BD9FF;
          position: relative;
        }

        .unread_badge {
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          background: #ff5050;
          color: #fff;
          border-radius: 50%;
          font-size: 10px;
          position: absolute;
          top: -4px;
          right: -12px;
        }
      }

      .member_list {
        display: flex;
        align-items: center;

        .member_avatar_box {
          width: 288px;
          height: 38px;
          overflow: hidden;
          flex: 1;

          .member_avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 8px;
          }
        }

        

        .more_members {
          width: 38px;
          height: 38px;
          line-height: 30px;
          text-align: center;
          font-size: 20px;
          color: #fff;
          margin-left: 8px;
          background: #282747;
          border-radius: 50%;
        }
      }
    }
  }

  .card_list_box {
    padding-left: 14px;

    .card_title {
      display: flex;
      padding: 0 14px;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      line-height: 24px;
      margin: 12px 0;

      .title_left {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
        color: #FCFFFA;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }

      .title_right {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        line-height: 12px;
        text-align: left;
        color: #C6C4F5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .more {
          background: #282747;
          margin-left: 8px;
          padding: 8px;
          border-radius: 5px;
          box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
        }

        .swiper-btn {
          margin-left: 8px;
        }

        .disabled {
          pointer-events: none;
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }

  }

  .swiperBox {
    position: relative;
    width: 100%;

    .swiper-slide {
      width: 331px;
      height: 148px;
      transition: all 0.3s ease-in-out;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .swiper-slide-prev {
      transform: scale(0.92);
    }

    .swiper-slide-next {
      transform: scale(0.92);
    }
  }

  // 赛事轮播图
  .event_box {
    margin-top: 14px;
    .swiper-slide {
      box-sizing: border-box;
      height: 300px;
      border-radius: 8px;
      background: linear-gradient(180deg, #0D0523 51.91%, #2B155D 100%);
    }

    .event_box_btn {
      height: 100%;
      padding: 0 14px;
      border-radius: 8px;
      margin-top: 23.19px;

      li {

        height: 44px;
        color: #FFFFFF;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-radius: 8px;
        // position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .time_box {
        background: #3A2960;
        margin-bottom: 12px;
      }

      .join_box {
        background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
        bottom: 18px;

      }

    }
  }

  .events_swiper {
    .events_box {
      >img {
        width: 331px;
        height: 148px;
        border-radius: 8px;
      }
    }
  }
}
.popup_body {
  color: #fff;
  padding: 10px;

  .info {
    margin-bottom: 10px;
    text-align: center;
    color: #FFFFFF;
    margin: 24px 0;
  }

  .submit_btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-evenly;

    .submit_close {
      width: 147px;
      height: 42px;
      color: #FFFFFF;
      text-align: center;
      line-height: 44px;
      background: #282747;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      border-radius: 8px;
    }
  }
}
</style>
